<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的购物车</block>
		</cu-custom>

		<view class="bg-white padding-lr" v-if="carList.length==0?true:false">
			<view class="padding-xs flex align-center">
				<view class="flex-sub text-center">
					<view class=" text-xsl padding">
						<text class=" cuIcon-cart text-red"></text>
					</view>
					<text class="padding">购物车空空如也</text>
					<view class="padding">
						<navigator url="../index/index" open-type="switchTab">
							<button class="cu-btn round sm text-green">去首页</button>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-list menu-avatar">
			<view class="cu-item " v-for="(item,index) in carList" :key="item.skuId">
				<view class="cu-avatar radius" :style="'background-image:url('+imageSrc+item.skuImage+')'"></view>
				<view class="content">
					<view class="text-gray">
						<view class="text-cut">{{ item.skuName }}</view>
					</view>
					<view class="text-gray text-sm">
						<button @click="addItem(index)" class="cu-btn round sm line-orange">+</button>
						<text class="text-red padding-lr">{{ item.skuCount}}</text>
						<button @click="reduceItem(index)" class="cu-btn round sm line-orange ">-</button>
					</view>
				</view>
				<view class="action">
					<view class="text-gey text-sm">{{ item.skuCost }}</view>
					<view class="text-red text-sm">￥{{ item.skuPrice*item.skuCount }}</view>
				</view>
				<view class="action " v-if="edit">
					<label class="radio">
						<radio :value="item.skuId" :checked="item.selected==1 ? true : false " />
					</label>
				</view>

			</view>
		</view>

		<view class="cu-bar bg-white tabbar border shop foot flex" >
			<view class="flex-sub flex justify-around align-center">
				<button class="cu-btn line-orange" @click="Edit">全选</button>
				<button class="cu-btn line-orange" @click="completeEdit" v-if="edit">完成</button>
			</view>
			<view class="flex-twice flex justify-around align-center"  style="height: 100%;">
				<view class="bg-orange submit flex-sub flex justify-center align-center text-sm">共计：{{ totalCount }}件</view>
				<view class="bg-orange submit flex-sub flex justify-center align-center text-sm">合计：{{ totalPrice }}</view>
				<navigator url="../submit/submit" open-type="navigate" 
					class="bg-red flex-sub flex justify-center align-center" style="height: 100%;">
					结算
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carList: [],
				edit: false,
				imageSrc: 'http://123.57.7.108:81/',
				cartId:''
			}
		},
		onLoad() {
			this.$api.api_getCart()
				.then(res => {
					this.carList = res.data.data.items;
					this.cartId = res.data.data.id;
				})
				.catch(err => {
					console.log(err)
				})
		},
		onPullDownRefresh() {
			this.$api.api_getCart()
				.then(res => {
					this.carList = res.data.data.items;
					this.cartId = res.data.data.id;
					uni.stopPullDownRefresh();
				})
				.catch(err => {
					console.log(err)
				})
		},
		computed:{
			totalPrice:function(){
				let price =0;
				this.carList.forEach(item =>{
					price+= item.skuPrice*item.skuCount;
				})
				return price;
			},
			totalCount:function(){
				let count = 0;
				this.carList.forEach(item =>{
					count += item.skuCount;
				})
				return count;
			}
		},
		methods: {
			Edit(){
				this.edit = true;
			},
			completeEdit(){
				this.edit = false;
			},
			addItem(index) {
				let count = this.carList[index].skuCount;
				let skuId = this.carList[index].skuId;
				let cartId = this.cartId;
				count++;
				
				this.$api.api_updateCart({
					skuId,cartId,count
				})
				.then(res =>{
					this.carList = res.data.data.items;
					this.cartId = res.data.data.id;
				})
				.catch(err =>{
					console.log(err)
				})
			},
			reduceItem(index) {
				if (this.carList[index].skuCount > 1) {
					this.carList[index].skuCount--;
				}else{
					this.carList.splice(index,1);
				}
			}
		}
	}
</script>

<style>
	.main {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.main .food-item {
		width: 60px;
		height: 40px;
		margin: 5px;
		border-radius: 5px;
		background: #0081FF;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
</style>
